<template>
	<div class="status-cell">
		<div :class="['status-indicator', row.status]" />
		<span>{{ row.status === "active" ? "正常" : "禁用" }}</span>
	</div>
</template>

<script setup lang="ts">
type PropsType = {
	row: {
		status: string;
	}
};

const props = withDefaults<PropsType>(defineProps<PropsType>(), {
	row: {
		status: "",
	}
});
</script>

<style scoped lang="scss">
.status-cell {
    display: flex;
    align-items: center;
    gap: 8px;

    .status-indicator {
        width: 8px;
        height: 8px;
        border-radius: 50%;

        &.active {
            background-color: var(--el-color-success);
        }

        &.disabled {
            background-color: var(--el-color-info);
        }
    }
}
</style>
